<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大屏</title>
    <style>
    *{margin:0;padding:0;}
    body{text-align:center;background-color:#fff;}
    </style>
</head>

<body><input id="info"></input><button onclick="testRun()" >run</button>
    <canvas id="canvas" ></canvas>
</body>

<script src='base.js' lang="utf-8"></script>
<script src='Fullscreen.js' lang="utf-8"></script>
<script src='component.js' lang="utf-8"></script>
<script src='r/myCarrierRun.js' lang="utf-8"></script>
<script src='r/myHTTP.js' lang="utf-8"></script>

</html>

<script>
 function testRun(){
	   myLoadData("runTest/move",function(){},function (data){
		 document.body.innerHTML="网络异常请刷新"
	}) 
}

screenHeight= window.screen.height-10
screenWidth =window.screen.width-10
var allPath=[];
var arrowLineList=[]; 

	function initCanvas(){
		var canvas = document.getElementById('canvas');
		canvas.tabIndex = 1000;
    var context = canvas.getContext('2d');
    canvas.height= screenHeight
    canvas.width= screenWidth
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle="#0ff";
    context.fillRect(0,0,canvas.width,canvas.height);
    context.translate(0.5,0.5);

	
		return context;
	}
	
		function 	initStn(data){
		  allPath.length=0
			arrowLineList.length=0
	    addstn(context,data)
		  addrelation(context,data);
		
	}
	function addstn(context,data){
				var physicalStns=	data.data.physicalStns;
				for(var i=0;i<physicalStns.length;i++){
				    var stn = 	physicalStns[i];
				    var x=stn.x||100;
				    var y=stn.y||100;
				    x=topX (x)
				    y=topX (y)*5
				    var l=stn.length||100
				    
				    if(stn.angle==90||stn.angle==270){
				    	    l=topX(l);
				    }else{
				    	    l=topX(l);
				    }
				
				    var color="";
				    if(stn.isKeyPoint==1){
				    	color='rgba(70,240,240,0.7)'
				    }
				    var carrer = new CarrierChain(stn.id,context,x,y,l,stn.angle|0,0,color,stn.distance)
				  	carrer.dbData=stn
					  allPath.push(carrer)//垂直
				}
		}
	
	
	function addrelation(context,data){
		var len = allPath.length;
		var physicalStnRelations=	data.data.physicalStnRelations;
		var errRelations = "站台异常"
		for(var i=0;i<physicalStnRelations.length;i++){
		    var rela = 	physicalStnRelations[i];
		    var begin=rela.src
		    var end=rela.next
		    	var beginCarrier={}
	   	 	  var endCarrier={}
	   	 		for(var j=0;j<len;j++){
				     	 var carrier=		allPath[j]
		     			 if(carrier.id==begin){
		     			 	  beginCarrier = carrier
		     			 }else if(carrier.id==end){
		     			 	  endCarrier = carrier
		     			 }
		     			 if(beginCarrier.id&&endCarrier.id){
		     			 		break;
		     			 }
		      }
		      
		      if(!beginCarrier.id||!endCarrier.id){
		     			 		errRelations+=rela.id+","
		     			 		continue;
		     	}
		    graph.addVector(rela.src,rela.next);
		    var cfg={context:context,x1:beginCarrier.x,y1:beginCarrier.y,x2:endCarrier.x,y2:endCarrier.y,id1:beginCarrier.id,id2:endCarrier.id};
		    
			  arrowLineList.push(new ArrowLine(cfg))//垂直
		}
	
	}
	
	function setArea(data){
		
			var h=0;
			var w=0
      var  physicalStns=data.data.physicalStns;
			for(var i=0;i<physicalStns.length;i++){
			    var stn = 	physicalStns[i];
			    h= stn.y>h?stn.y:h;
			    w =stn.x>w?stn.x:w;
			}
			h=h+100
			h*=5
			w=w+100
	    screenWidth=screenWidth>w?screenWidth:w;
		  screenHeight=screenHeight>h?screenHeight:h;
	}
	function loadsuccess(data){
		 setArea(data)
		 context = initCanvas()
	   initStn(data)
		 globalLoadfinsh(context);
		 myReflash("open/c/node",function(val){
		 	
      	var nodeArr=val.data.node
      	
      	 for(var i=0;i<allPath.length;i++){
				     	 var path=		allPath[i];
		     		   setMyOrder(path,nodeArr)
		     }
		     
		    

      })
		 
		}

	function setMyOrder(path,nodeArr){
		
		for(var i=0;i<nodeArr.length;i++){
			var n= nodeArr[i];
			
				if(n.dbStns==path.dbData.id){
					
					path.dbData.myOrder=n.myOrder;
					path.autoData=n;
					path.dbData.estimate=n.timeAxis;
					
					var r=parseInt(n.stop/10000);
					if(r>1){
							path.setColor("rgba("+r+",0,0,1)")
					}else{
							path.setColor("")
					}
				
					return;
					
				}
		
			
		}
		
		
	}
	
		
	window.onload = function(){
		  myLoadData("sign/stn",loadsuccess,function (data){ document.body.innerHTML="网络异常请刷新"}) 
}
 
var backPic = new Image();
backPic.src = "png/back.png";
 




 
function topX(x){return parseInt(x);} 
    

function globalLoadfinsh(  context){
	

 


    //动画循环
      (function drawFrame(t){
          window.requestAnimationFrame(drawFrame);
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.fillStyle="#0ff";
          context.fillRect(0,0,canvas.width,canvas.height);
          myDraw(context);
          
        
      }());
	}
	

   function myDraw(context){
   	var info=document.getElementById("info").value;

      	 context.drawImage(backPic,0,0,canvas.width, canvas.height)
      	
		     for(var i=0;i<allPath.length;i++){
				     	 var path=		allPath[i]
		     			 path.draw();
		     			 
		     			if(path.autoData){
		     						context.font="12px 宋体";
				     			 	context.fillStyle ="#0ff"
				     			 	var ctaskNo=""
				     			 	if(path.autoData&&path.autoData.currentTimeAxis){
				     			 		ctaskNo = path.autoData.currentTimeAxis.taskNo
				     			 		}
				     			 	
		     						context.fillText(ctaskNo+":"+parseInt(path.autoData.stop/1000)+"s",path.x+70,path.y-10);
		     			}
		     			  
		     			 if(path.dbData&&path.dbData.estimate){
		     			 	
				     			 		var estimateArr=path.dbData.estimate;
				     			 		show=true;
				     			 		
				     			 		if(info){
				     			 			show=false;
				     			 		}
				     			 		for(var j=0;j<estimateArr.length;j++){
					     			 		 var e=estimateArr[j];
					     			 		 if(info&&info==e.taskNo){
					     			 				show=true;
					     			 			}
					     			 	} 
				     			 		
				     			 	
				     			 	
				     			 	for(var j=0;j<estimateArr.length;j++){
						     			 		var e=estimateArr[j];
						     			 		if(show){
						     			 		
						     			 		context.font="12px 宋体";
						     			 	  context.fillStyle ="#0ff"
						     			 	  context.fillText(e.taskNo+">"+e.beginDate.substring(8)+"-"+e.endDate.substring(14),path.x-60,path.y+20+15*j);
						     			 	  
						     			 		}
						     	 } 
		     			 }
		     }
		
 				for(var i=0;i<arrowLineList.length;i++){
				     	 var yzj=		arrowLineList[i]
		     			 yzj.draw();
		     }
   			
   			
   }
   
    </script>
